<template>
  <div>
    <el-menu
      :collapse="show"
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#242f42"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      router
    >
      <!-- roter为左侧的菜单栏开启路由模式 只需要在下级菜单
        el-menu-item的index中设置为路径即可
     -->
      <el-submenu
        :index="index + ''"
        v-for="(item, index) in menusList"
        :key="item.id"
      >
        <template slot="title">
          <i :class="icon[item.id]"></i>
          <span>{{ item.authName }}</span>
        </template>

        <el-menu-item :index="i.path" v-for="i in item.children" :key="i.id">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{ i.authName }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import http from '@/util/http.js'
export default {
  props: ['show'],
  data () {
    return {
      menusList: [],
      icon: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      }
      // show: true,
    }
  },

  mounted () {
    console.log(this.$props)

    http('menus').then((res) => {
      console.log(res.data.data)
      this.menusList = res.data.data
    })
  },
  methods: {
    // shows() {
    //   this.show = !this.show;
    //   this.$emit("show", this.show);
    //   //   console.log(this.show);
    // },
  }
}
</script>
<style lang="scss" scoped>
.el-menu {
  border: 0;
}

.iconfont {
  margin-right: 8px;
  font-size: 24px;
}
.isShow {
  width: 100%;
  height: 30px;
  text-align: center;
  cursor: pointer;
  color: #fff;
}
</style>
